<template>
  <div>
    <ea-dialog
        v-bind="$attrs"
        v-on="$listeners"
        width="800px"
        ref="elDialog"
        title="重考设置"
        :type="type"
        @submit="submit"
        @reset="$refs.form.resetFields()"
        @closed="end"
    >
      <el-form
          ref="form"
          :model="singleData"
          :rules="rules"
          label-width="110px"
      >
        <el-form-item label="重考时间" prop="selectedTime">
          <el-date-picker
              v-model="singleData.selectedTime"
              @change="onSelectTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="选择学生" prop="studentlist">
          <el-button @click="showSelectStuDialog = true">选择学生</el-button>
          <p>已选{{ singleData.studentlist.length }}人</p>
        </el-form-item>
        <el-form-item label="通知标题" prop="noticeTitle">
          <el-input
              v-model="singleData.noticeTitle"
              maxlength="50"
              show-word-limit
              placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="通知内容" prop="noticeContent">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="singleData.noticeContent"
              maxlength="100"
              show-word-limit
          />
        </el-form-item>
      </el-form>
    </ea-dialog>
    <select-stu
        :show.sync="showSelectStuDialog"
        :stu-list.sync="singleData.studentlist"
        api-url="/sys/examManage/getreExamineStudent"
        :api-params="selectStuApiParams"
        :column="stuTbColumn"
    >
      <template v-slot:table-filter>
        <el-input
            v-model="selectStuApiParams.username"
            placeholder="请输入学生姓名"
        />
        <el-input
            v-model="selectStuApiParams.organizename"
            placeholder="请输入班级名"
        />
        <div class="switch">
          <el-switch
              v-model="selectStuApiParams.type"
              :inactive-value="0"
              :active-value="1"
              active-text="仅查看不及格学生"
              active-color="#ff4949"
          />
        </div>
      </template>
    </select-stu>
  </div>
</template>

<script>
import SelectStu from "@/views/component/SelectStu";
import editAndAdd from "@/mixins/business/editAndAdd";
import SchoolDeptClassSelection from "@/views/component/SchoolDeptClassSelection"

export default {
  name: "ReExam",
  components: {SelectStu},
  mixins: [editAndAdd],
  data() {
    return {
      singleData: {
        examid: null,
        noticeContent: "",
        noticeTitle: "",
        reexamendtime: "",
        reexamstatrtime: "",
        studentlist: [],
        selectedTime: []
      },
      selectStuApiParams: {
        examid: 0,
        organizename: "",
        type: 0,
        username: "",
        schoolCdoe: ""
      },
      rules: {
        noticeTitle: {required: true, message: "请输入通知标题！"},
        noticeContent: {required: true, message: "请输入通知内容！"},
        studentlist: {required: true, message: "请选择重考学生！"},
        selectedTime: {required: true, message: "请选择重考时间！"}
      },
      stuTbColumn: [
        {prop: "username", label: "姓名"},
        {prop: "organizename", label: "班级"},
        {prop: "score", label: "分数"}
      ],
      examid: null,
      examname: "",
      showSelectStuDialog: false
    };
  },
  watch: {
    examid: {
      immediate: true,
      handler(n) {
        this.singleData.examid = this.selectStuApiParams.examid = n;
      }
    },
    "singleData.selectedTime": {
      immediate: true,
      handler(n) {
        this.singleData.reexamstatrtime = n[0];
        this.singleData.reexamendtime = n[1];
      }
    }
  },
  methods: {
    handle() {
      const singleData = this.deepClone(this.singleData);
      singleData.studentlist = singleData.studentlist.join(",");
      return this.axios.post("/sys/examManage/reExamine", singleData);
    },
    onSelectTime(e) {
      this.singleData.noticeTitle = `${this.examname} 重考通知`;
      this.singleData.noticeContent = `请于${this.formatterDate([
        e[0]
      ])}准时参加${this.examname}重考！此场考试的截止日期为${this.formatterDate(
          e[1]
      )}，请合理安排时间，切莫错过考试！`;
    }
  }
};
</script>

<style scoped></style>
